<template>
  <ee-radio-group ref="rg" class="ee-tabbar-group">
    <slot>
      <template v-if="options">
        <template v-for="value, index in options" :key="index">
          <slot name="item" :item="value">
            <ee-tabbar :value="item.to" :icon="item.icon">
              {{ item.label }}
            </ee-tabbar>
          </slot>
        </template>
      </template>
    </slot>
  </ee-radio-group>
</template>

<script type="text/javascript">
import parent from "../form/ee-radio.vue"
import placeholder from "../__mixin/placeholder"
/** 
 * @typedef {object} option
 * @property {string} to - router-link的to属性
 * @property {string} icon - 展示图标
 * @property {string} label - 默认插槽展示的文字
 */
/** 手机版常用的底部导航组件
 * 
 * 插槽
 * @property {{}} default - 整个内部自定义，一般会自己v-for一批ee-radio
 * @property {option} item - 指定options时循环一个option的插槽，
 */
export default {
  name: "ee-tabbar-group",
  mixins: [parent, placeholder],
  props: {
    /** 可以通过配置生成选项
     * @type { option[] }
     * @example
     * <ee-tabbar-group :options="[{ to: '/', icon: 'home', label: '首页' }]">
     */
    options: Array,
  },
}
</script>

<style lang="scss">
.ee-tabbar-group {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: inherit;
  background-color: #fff;
  border-top: 1px solid var(--line0);

  & > ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>